"use strict";
// 引入 path 模块处理文件路径
const path = require("path");

// 解析路径的辅助函数
function resolve(dir) {
  return path.join(__dirname, dir);
}

// 获取项目名称，用作网页标题

// 开发服务器端口配置
// 如果端口设置为80，需要管理员权限执行命令行
// 例如，Mac系统：sudo npm run
// 可以通过以下方式更改端口：
// port = 9528 npm run dev 或 npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528; // 开发端口

// 所有配置项说明请参考 https://cli.vuejs.org/config/
module.exports = {
  /**
   * 如果计划将站点部署到子路径下，则需要设置 publicPath
   * 例如，如果要将站点部署到 https://foo.github.io/bar/
   * 则 publicPath 应该设置为 "/bar/"
   * 在大多数情况下请使用 '/' !!!
   * 详情: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: "/",
  // 构建输出目录
  outputDir: "dist",
  // 静态资源目录
  assetsDir: "static",
  // 是否在开发环境下启用 eslint
  lintOnSave: process.env.NODE_ENV === "development",
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,

  // 开发服务器配置
  devServer: {
    port: port,
    open: true, // 自动打开浏览器
    overlay: {
      warnings: false,
      errors: true, // 错误显示在浏览器中
    },
  },

  // webpack配置
  configureWebpack: {
    resolve: {
      alias: {
        "@": resolve("src"), // 设置@别名指向src目录
      },
    },
  },

  // webpack链式配置
  chainWebpack(config) {
    // 可以提高首屏速度，建议开启预加载
    config.plugin("preload").tap(() => [
      {
        rel: "preload",
        // 忽略 runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial",
      },
    ]);

    // 当有很多页面时，会导致太多无意义的请求
    config.plugins.delete("prefetch");

    // 设置 svg-sprite-loader
    config.module.rule("svg").exclude.add(resolve("src/icons")).end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();

    // 生产环境配置
    config.when(process.env.NODE_ENV !== "development", (config) => {
      config
        .plugin("ScriptExtHtmlWebpackPlugin")
        .after("html")
        .use("script-ext-html-webpack-plugin", [
          {
            // `runtime` 必须与 runtimeChunk 名称相同。默认是 `runtime`
            inline: /runtime\..*\.js$/,
          },
        ])
        .end();

      // 代码分割配置
      config.optimization.splitChunks({
        chunks: "all",
        cacheGroups: {
          libs: {
            name: "chunk-libs",
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: "initial", // 只打包初始时依赖的第三方
          },
          elementUI: {
            name: "chunk-elementUI", // 单独将 elementUI 拆包
            priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // 适配cnpm
          },
          commons: {
            name: "chunk-commons",
            test: resolve("src/components"), // 可以自定义规则
            minChunks: 3, // 最小公共数
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      });
      // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
      config.optimization.runtimeChunk("single"); // 运行时代码单独打包
    });
  },
};
